<?php
if (!defined('ABSPATH')) { exit; }
?>

<div class="wrap">
    <h1>🕷️ 蜘蛛分析 - SPA测试页面</h1>
    
    <div class="notice notice-info">
        <p><strong>SPA功能测试：</strong> 这个页面用于测试单页应用功能是否正常工作。</p>
    </div>
    
    <div class="spa-test-container">
        <h2>功能测试</h2>
        
        <div class="test-section">
            <h3>1. 路由测试</h3>
            <p>点击下面的链接测试路由切换：</p>
            <div class="test-links">
                <a href="#overview" class="button">蜘蛛概况</a>
                <a href="#logs" class="button">蜘蛛日志</a>
                <a href="#list" class="button">蜘蛛列表</a>
                <a href="#paths" class="button">访问路径</a>
                <a href="#articles" class="button">文章爬取</a>
            </div>
        </div>
        
        <div class="test-section">
            <h3>2. AJAX测试</h3>
            <p>测试AJAX请求是否正常：</p>
            <button id="test-ajax" class="button button-primary">测试AJAX请求</button>
            <div id="ajax-result" class="test-result"></div>
        </div>
        
        <div class="test-section">
            <h3>3. 当前状态</h3>
            <div id="current-status" class="test-result">
                <p>当前路由: <span id="current-route">未设置</span></p>
                <p>jQuery状态: <span id="jquery-status">检查中...</span></p>
                <p>SPA路由状态: <span id="spa-status">检查中...</span></p>
            </div>
        </div>
    </div>
</div>

<style>
.spa-test-container {
    max-width: 800px;
    margin: 20px 0;
}

.test-section {
    background: #fff;
    border: 1px solid #ccd0d4;
    border-radius: 4px;
    padding: 20px;
    margin: 20px 0;
}

.test-links {
    margin: 10px 0;
}

.test-links .button {
    margin: 5px 10px 5px 0;
}

.test-result {
    margin: 10px 0;
    padding: 10px;
    background: #f9f9f9;
    border-left: 4px solid #0073aa;
    border-radius: 0 4px 4px 0;
}

.test-result.success {
    border-left-color: #00a32a;
    background: #f0f8f0;
}

.test-result.error {
    border-left-color: #d63638;
    background: #fef0f0;
}
</style>

<script>
jQuery(document).ready(function($) {
    'use strict';
    
    // 检查jQuery状态
    $('#jquery-status').text('✓ 已加载').addClass('success');
    
    // 检查SPA路由状态
    if (typeof window.SpiderSPARouter !== 'undefined') {
        $('#spa-status').text('✓ 已加载').addClass('success');
    } else {
        $('#spa-status').text('✗ 未加载').addClass('error');
    }
    
    // 更新当前路由
    function updateCurrentRoute() {
        const currentRoute = window.location.hash || '#overview';
        $('#current-route').text(currentRoute);
    }
    
    // 监听路由变化
    window.addEventListener('hashchange', updateCurrentRoute);
    updateCurrentRoute();
    
    // AJAX测试
    $('#test-ajax').on('click', function() {
        const $button = $(this);
        const $result = $('#ajax-result');
        
        $button.prop('disabled', true).text('测试中...');
        $result.html('<p>正在发送AJAX请求...</p>');
        
        $.post(ajaxurl || window.ajaxurl, {
            action: 'spider_get_overview_stats',
            nonce: wpSpiderMonitor?.nonce || ''
        })
        .done(function(response) {
            if (response.success) {
                $result.html(`
                    <p class="success">✓ AJAX请求成功</p>
                    <p>响应数据: ${JSON.stringify(response.data).substring(0, 100)}...</p>
                `).addClass('success');
            } else {
                $result.html(`
                    <p class="error">✗ AJAX请求失败</p>
                    <p>错误信息: ${response.data?.message || '未知错误'}</p>
                `).addClass('error');
            }
        })
        .fail(function(xhr, status, error) {
            $result.html(`
                <p class="error">✗ AJAX请求失败</p>
                <p>状态: ${status}</p>
                <p>错误: ${error}</p>
            `).addClass('error');
        })
        .always(function() {
            $button.prop('disabled', false).text('测试AJAX请求');
        });
    });
    
    // 测试链接点击
    $('.test-links a').on('click', function(e) {
        e.preventDefault();
        const hash = $(this).attr('href');
        window.location.hash = hash;
    });
    
    console.log('SPA测试页面初始化完成');
});
</script>
